<template>
	<div id="antomechanisms">
		<div class='content_wrap'>
			<div class='titlebox' >
        <b><div class='title'>同步信息列表</div></b>
        <at-button type='primary' class='clearanto' @click="toPath" style='position:relative;width:110px'>
          <i class="saas-icon-clock" style="position:absolute;top:5px;left:3px;font-size:20px" ></i>
            <span style='margin-right:-20px'>查看历史信息</span> 
        </at-button>
        <at-button type='primary' style='position:relative;width:110px' class='history' @click='clear'  :disabled="add.length == 0&& update.length == 0 && deletes.length == 0?true:false">
          <i class="saas-icon-icon-close" style="position:absolute;top:5px;left:3px;font-size:20px" ></i>
            <span style='margin-right:-20px'>清空同步信息</span> 
        </at-button>
      </div>
			<div class='bigtable'>
				<div class="table_wrap">
					<div class='min_table'>

						<div class="message">
							新增机构信息
							<span :class="{'doubleNum':add.length.toString().length === 2, 'singleNum': add.length.toString().length === 1, 'more': add.length>99, 'common': true}">
							<span class="infoCount" v-if="add.length<=99"> {{add.length}}</span>
							<span class="infoCount" v-else>99+</span>
							</span>
						</div>

						<div class="table_box">
							<at-table :data="add" 
							
							max-height="251"
							@sort-change="sortChange"
							@filter-change="addFilter">
							<at-table-column show-overflow-tooltip prop="zr_time" label="更新时间" width='160' column-key="add" sortable="custom">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="aagency_id" label="机构ID">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="aagency_name" label="机构名称">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="ctype_name" label="类型" :filters="tradename" column-key="type_name">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="bagency_name" label="上级机构">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="sup" label="监管机构">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="province" label="所在省份">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="city" label="所在城市">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="area" label="所在地区">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="alinkman" label="责任人">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="alinkman_email" label="邮箱" width='160'>
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="atelephone" label="手机号码">
							</at-table-column>
							</at-table>
						</div>

					</div>
				</div>
		
				<div class="table_wrap">
					<div class='min_table'>
						<div class="message">
						修改机构信息
						<span :class="{'doubleNum':update.length.toString().length === 2, 'singleNum': update.length.toString().length === 1, 'more': update.length>99, 'common': true}">
											<span class="infoCount" v-if="update.length<=99"> {{update.length}}</span>
											<span class="infoCount" v-else>99+</span>
									</span>
					</div>
					<div class="table_box">
						<at-table max-height="251" :data="update" @sort-change="sortChange" @filter-change="upFilter">
					<at-table-column show-overflow-tooltip prop="zr_time" label="更新时间" width='160' column-key="update" sortable="custom">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="aagency_id" label="机构ID">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="aagency_name" label="机构名称">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="ctype_name" label="类型" :filters="tradename" column-key="type_name">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="bagency_name" label="上级机构">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="sup" label="监管机构">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="province" label="所在省份">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="city" label="所在城市">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="area" label="所在地区">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="alinkman" label="责任人">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="alinkman_email" label="邮箱" width='160'>
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="atelephone" label="手机号码">
							</at-table-column>
					</at-table>
					</div>
					</div>
					
				</div>
				<div class="table_wrap">
					<div class='min_table'>
							<div class="message">
						删除机构信息
						<span :class="{'doubleNum':deletes.length.toString().length === 2, 'singleNum': deletes.length.toString().length === 1, 'more': deletes.length>99, 'common': true}">
											<span class="infoCount" v-if="deletes.length<=99"> {{deletes.length}}</span>
											<span class="infoCount" v-else>99+</span>
									</span>
					</div>
					<div class="table_box">
						<at-table max-height="251"  :data="deletes" @sort-change="sortChange" @filter-change="delFilter">
					<at-table-column show-overflow-tooltip prop="zr_time" label="更新时间" width='160' column-key="delete" sortable="custom">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="aagency_id" label="机构ID">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="aagency_name" label="机构名称">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="ctype_name" label="类型" :filters="tradename" column-key="type_name">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="bagency_name" label="上级机构">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="sup" label="监管机构">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="province" label="所在省份">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="city" label="所在城市">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="area" label="所在地区">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="alinkman" label="责任人">
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="alinkman_email" label="邮箱" width='160'>
							</at-table-column>
							<at-table-column show-overflow-tooltip prop="atelephone" label="手机号码">
							</at-table-column>
					</at-table>
					</div>
					</div>
				
				</div>
			</div>

		</div>
		
		
		<at-dialog title='提示' :visible.sync='suredeleteone' size='small'>
      <div style="text-align:center;padding-top:20px">
        <span>确认清空</span>
      </div>
      <div slot='footer' class='dialog-footer'>
        <at-button type='primary' @click.stop='deletemsgone()'>确 定</at-button>
        <at-button @click.stop='cancel'>取 消</at-button>
      </div>
    </at-dialog>
		<!-- <at-dialog title='提示' :visible.sync='suredeleteone' size='tiny'>
      <i class='saas-icon-cir-i' style='font-size:20px;color:red;'></i>
      <span>确认删除</span>
      <div slot='footer' class='dialog-footer'>
        <at-button type='primary' @click.stop='deletemsgone'>确 定</at-button>
        <at-button @click.stop='cancel'>取 消</at-button>
      </div>
    </at-dialog> -->
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
	  name: 'syncMechanisms',
	  data () {
	    return {
	      suredeleteone: false
	    }
	  },
	  computed: {
	    ...mapState({
	      add: state => state.mechanism.syncDate.addtable, // 列表数据
	      update: state => state.mechanism.syncDate.uptable, // 列表数据
	      deletes: state => state.mechanism.syncDate.deltable, // 列表数据
	      tradename: state => state.mechanism.options
	    })
	  },
	  methods: {
	    deletemsgone () {
	      this.$store.dispatch('mechanism/delSyncmessage')
	      this.getMessage()
	      this.suredeleteone = false
	    },
	    cancel () {
	      this.suredeleteone = false
	    },
	    toPath () {
	      this.$router.push('synclog')
	    },
	    clear () {
	      this.suredeleteone = true
	    },
	    addFilter (value) {
	      this.setFilter('add', value['type_name'])
	    },
	    upFilter (value) {
	      this.setFilter('update', value['type_name'])
	    },
	    delFilter (value) {
	      this.setFilter('delete', value['type_name'])
	    },
	    setFilter (type, value) {
	      console.log(value)
	      this.$store.commit('mechanism/syncFilters', value)
	      this.$store.dispatch('mechanism/getSyncmessage', { 'type': type })
	    },
	    sortChange ({ column, prop, order }) {
	      if (prop) {
	        var data = {
	          'prop': prop,
	          'order': order.substring(0, order.length - 3)
	        }
	        this.$store.commit('mechanism/syncOrder', data)
	        if (column.columnKey === 'add') {
	          this.$store.dispatch('mechanism/getSyncmessage', { 'type': 'add' })
	        } else if (column.columnKey === 'update') {
	          this.$store.dispatch('mechanism/getSyncmessage', { 'type': 'update' })
	        } else {
	          this.$store.dispatch('mechanism/getSyncmessage', { 'type': 'delete' })
	        }
	      }
	    },
	    getMessage () {
	      this.$store.dispatch('mechanism/getSyncmessage', { 'type': 'add' })
	      this.$store.dispatch('mechanism/getSyncmessage', { 'type': 'update' })
	      this.$store.dispatch('mechanism/getSyncmessage', { 'type': 'delete' })
	    }
	  },
	  mounted () {
	    this.getMessage()
	    this.$store.dispatch('mechanism/getNodetype', 1) // 获取机构类型列表
	  }
	}
</script>
<style lang='less'>
#antomechanisms {
  background-color: #ffffff;
  .at-table__body-wrapper {
    overflow: hidden;
  }
  .content_wrap {
  font-family: '宋体';
  min-height: 710px;
}
 .at-popover {
  min-width: 60px;
  background: #1f92ef;
  color: aliceblue;
  }
  .titlebox {
    height: 50px;
    border-bottom: 1px solid #eeeeee;
    padding:0px;
  }
  .title {
    padding-left:20px;
    color: #5c6781;
    font-size: 14px;
    line-height:50px;
    float:left;
  }
  .min_table {
    border: 1px solid #eee;
  margin-bottom: 20px;
  }
  .history {
    float:right;
    margin-right:10px;
    margin-top:10px;
  }
  .clearanto {
    float:right;
    margin-right:20px;
    margin-top:10px;
  }
  .message {
    height:50px;
    line-height:50px;
    border-bottom: 1px solid #eeeeee;
    padding-left:20px;
  }
  .bigtable {
    padding: 20px;
    background: #fff;
  }
  .table_box {
  /* max-height: 243px;
  overflow: auto; */
  padding: 0 20px;
  margin-bottom:20px;
	}
	.table_box .at-table__body-wrapper {
		overflow: auto
	}
  .at-table thead {
    font-size: 12px;
    border-top: none;
    font-weight: 700;
  }
  .table_wrap {
    margin-bottom: 20px;
  }
  .doubleNum {
    width: 25px;
    margin-top: 4px;
    border-radius: 8.5px;
    margin-left: 10px;
  }
  .singleNum {
    width: 17px;
    border-radius: 8.5px;
    margin-left: 10px;
  }
  .more {
    border-radius: 8.5px;
    margin-left: 10px;
  }
  .common {
    font-weight: bold;
    background: #1f92ef;
    display: inline-block;
    height: 17px;
    margin-left: 10px;
  }
  .infoCount {
    display: block;
    color: #FFFFFF;
    height: 17px;
    line-height: 18px;
    text-align: center;
    font-size : 10px;
    -webkit-transform : scale(0.84,0.84);
    *font-size:10px;
  }
}
</style>
